<template>
  <div class="gzl">
    <div class="search">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="输入搜索">
          <el-input
            v-model="search.key"
            placeholder="请输入设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入时间">
          <el-date-picker
            v-model="search.time"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chage"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
        >
          <el-button type="primary" @click="onsubmit"
          >查询
          </el-button
          >
        </el-form-item
        >
      </el-form>
      <!--      <el-button class="ebtn" type="warning" @click="dialogVisible= true">新增信息</el-button>-->
    </div>
    <el-table class="table" stripe :data="tableData" style="width: 100%; height:580px" >
      <el-table-column prop="applyTime" label="申请时间" align="center"/>
      <el-table-column prop="type" label="全部类型" align="center">
        <template v-slot="scope">
          <span v-show="scope.row.type==20">站点 - 维护 - 工时申请</span>
          <span v-show="scope.row.type==21">站点 - 申请 - 产品申请</span>
          <span v-show="scope.row.type==22">站点 - 返件 - 返件审核</span>
          <span v-show="scope.row.type==23">站点 - 新增 - 新增审核</span>
          <span v-show="scope.row.type==24">站点 - 开票 - 开票审核</span>
          <span v-show="scope.row.type==25">站点 - 付款 - 付款审核</span>
        </template>
      </el-table-column>
      <el-table-column prop="siteName" label="全部站点" align="center">
      </el-table-column>
      <el-table-column prop="userName" label="申请人" align="center"/>
      <el-table-column prop="shengheStatus" label="状态" align="center">
        <template v-slot="scope">
          <span v-show="scope.row.shengheStatus==1">待审核</span>
          <el-button v-if="scope.row.status == 2" type="text" size="medium"
                     @click="getBOhui(scope.row.checkFolwId)">驳回
          </el-button>
<!--          <span v-show="scope.row.shengheStatus==2">驳回</span>-->
          <span v-show="scope.row.shengheStatus==3">已完成</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            v-show="scope.row.shengheStatus==1"
            @click="examine(scope.row.id,scope.row.type,isDetail=1,scope.row.checkFolwId)"
          >审核
          </el-button>
          <el-button size="small" type="text"
                     @click="examine(scope.row.id,scope.row.type,isDetail=2,scope.row.checkFolwId)">详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pgnt">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :page-count="total"
      >
      </el-pagination>
    </div>
    <!--返件-->
    <el-dialog
      title="返件详情"
      :visible.sync="dialog_PurchaseOrder"
      width="70%"
      :modal-append-to-body="false">
      <div class="header">
        <div :data="tableData_Xu">
          <ul>
            <li>
              <span>站点编号</span>
              <el-input style="width: 70%;" v-model="tableData_Xu.siteNumber" disabled></el-input>
            </li>
            <li>
              <span>站点名称</span>
              <el-input style="width: 70%;" v-model="tableData_Xu.siteName" disabled></el-input>
            </li>
            <li>
              <span>站点地址</span>
              <el-input style="width: 70%;" v-model="tableData_Xu.siteAddress" disabled></el-input>
            </li>
            <li>
              <span>站点联系人</span>
              <el-input style="width: 70%;" v-model="tableData_Xu.areaResponsible" disabled></el-input>
            </li>
            <li>
              <span>联系方式</span>
              <el-input style="width: 70%;" v-model="tableData_Xu.areaResponsiblePhone" disabled></el-input>
            </li>
          </ul>
        </div>
        <template>
          <el-table
            :data="tableData_XU_left"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="70px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="productName"
              label="物料名称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="productTuhao"
              label="图号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="returnNumber"
              label="返件数量"
              align="center">

            </el-table-column>
            <el-table-column
              prop="baozhiqiNumber"
              label="三包期数量"
              align="center">

            </el-table-column>
            <el-table-column
              prop="guoqiNumber"
              label="非三包期数量"
              align="center">

            </el-table-column>
            <el-table-column
              prop="tianhuoTime"
              label="调货日期"
              align="center"
            >
              <template v-slot="scope">
              <span>
                {{ formatTime(scope.row.tianhuoTime) }}
              </span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="tongguo()" v-if="staus=='1'">确 定</el-button>
    <el-button @click="dialogVisible=true ,getbo()" v-if="staus=='1'">驳 回</el-button>
    <el-button @click="dialog_PurchaseOrder = false" v-if="staus=='2'">返 回</el-button>
  </span>
    </el-dialog>
    <!--驳回-->
    <el-dialog
      title="驳回"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="false">
      <span>驳回理由 : </span>
      <el-input style="width: 80%" v-model="bohui" placeholder="请输入驳回理由"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false ,getbo()">确 定</el-button>
    <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
    </el-dialog>
    <!--开票、付款 -->
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible_kaipiao_fukuang"
      width="76%"
      :modal-append-to-body="false">
      <template>
        <ul v-show="global_status==3||global_status==4" class="el-inputbox">
          <li>
            <span>站点名称</span>
            <el-input style="width: 68%;" disabled v-model="custom_info.siteName"></el-input>
          </li>
          <li>
            <span>联系人</span>
            <el-input style="width: 68%;" disabled v-model="custom_info.contactPerson"></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input style="width: 68%;" disabled v-model="custom_info.phone"></el-input>
          </li>
          <li>
            <span>总金额</span>
            <el-input style="width: 68%;" disabled v-model="custom_info.totalMoney"></el-input>
          </li>
        </ul>
        <ul v-show="global_status==3||global_status==4" class="el-inputbox">
          <li>
            <span>已付款金额</span>
            <el-input style="width: 68%;" disabled v-model="custom_info.paymentMoney"></el-input>
          </li>
          <li>
            <span>剩余付款金额</span>
            <el-input style="width: 68%;" disabled v-model="custom_info.lastPaymentMoney"></el-input>
          </li>
          <li>
            <span>申请中金额</span>
            <el-input style="width: 68%;" disabled v-model="custom_info.applyPaymentMoney"></el-input>
          </li>
          <li>
            <span>本次付款金额</span>
            <el-input disabled style="width: 68%;" v-model="paymentMoneyNow"></el-input>
          </li>
        </ul>
      </template>
      <template>
        <el-table
          :data="tableData_repairLog"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            align="center"
          width="70">
          </el-table-column>
          <el-table-column
            prop="applyTime" align="center"
            label="维修日期">
            <template v-slot="scope">
              <span>{{ dateFormat("yyyy-MM-dd", scope.row.applyTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="productName" align="center"
            label="零件名称">
          </el-table-column>
          <el-table-column
            prop="productTuhao" align="center"
            label="零件图号">
          </el-table-column>
          <el-table-column
            prop="number" align="center"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="returnNumber" align="center"
            label="返件总量">
          </el-table-column>
          <el-table-column
            prop="danjia" align="center"
            label="单价（元）">
          </el-table-column>
          <el-table-column
            prop="chalvfei" align="center"
            label="管理费（元）">
          </el-table-column>
          <el-table-column
            prop="money" align="center"
            label="金额（元）">
          </el-table-column>
          <el-table-column
            prop="chalvfei" align="center"
            label="差旅费（元）">
          </el-table-column>
          <el-table-column
            prop="qitafeiyong" align="center"
            label="其他费用">
          </el-table-column>
        </el-table>
      </template>
      <template>
        <el-table
          :data="tableData_detail_kaipiaoLog"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            align="center"
          width="140">
          </el-table-column>
          <el-table-column
            label="开票时间"
            prop="kaipiaoTime"
            align="center">
            <template v-slot="scope">
              <div>{{ dateFormat("yyyy-MM-dd", scope.row.kaipiaoTime) }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="开票号"
            prop="piaoNumber"
            align="center">
          </el-table-column>
          <el-table-column
            prop="money"
            label="开票额"
            align="center">
          </el-table-column>
          <el-table-column
            label="状态"
            align="center">
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: red">待审核</span>
              <span v-if="scope.row.status==2">已驳回</span>
              <span v-if="scope.row.status==3">已完成</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="piaomian">
          <span>票面总额</span>
          <el-input disabled style="width: 60%;" v-model="faFaceValue"></el-input>
        </div>
      </template>
      <template>
        <p v-show="global_status==3||global_status==4" class="huizo">付款记录 :</p>
        <template>
          <el-table
            v-show="global_status==3||global_status==4"
            :data="tableData_paymentLog"
            style="width: 100%">
            <el-table-column
              type="index"
              align="center"
              label="序号"
            width="140">
            </el-table-column>
            <el-table-column
              prop="money" align="center"
              label="付款金额">
            </el-table-column>
            <el-table-column
              align="center"
              label="付款时间">
              <template v-slot="scope">{{ dateFormat("yyyy-MM-dd", scope.row.createonTime) }}</template>
            </el-table-column>
            <el-table-column
              label="状态" align="center">
              <template v-slot="scope">
                <span v-if="scope.row.status==1">待审核</span>
                <span v-if="scope.row.status==2">驳回</span>
                <span v-if="scope.row.status==3">已完成</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button v-show="isDetail==1" @click="dialogVisible_kaipiao_fukuang = false;confirm_kaipiao_fukuan(3)"
                   type="primary">确 定</el-button>
        <el-button v-show="isDetail==1" @click="dialogVisible_kaipiao_fukuang = false;show_BoHui">驳 回</el-button>
        <el-button v-show="isDetail==2" @click="dialogVisible_kaipiao_fukuang = false">取 消</el-button>
  </span>
    </el-dialog>
    <!-- 开票 付款驳回   -->
    <el-dialog
      title="驳回"
      :visible.sync="dialogVisible_turnDown"
      width="30%"
      :modal-append-to-body="false">
      <span>驳回理由 : </span>
      <el-input style="width: 80%" v-model="bohui" placeholder="请输入驳回理由"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible_turnDown = false ,confirm_kaipiao_fukuan(4)">确 定</el-button>
    <el-button @click="dialogVisible_turnDown = false">取 消</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="驳回详情"
      :visible.sync="dialogVisible_bohui"
      width="50%"
      :modal-append-to-body="false">
      <ul :data="bohuilist" class="bohuizujian">
        <li>
          <span>审核日期</span>
          <el-input v-model="bohuilist.checkTime" style="width: 70%;" disabled></el-input>
        </li>
        <li>
          <span>审核人</span>
          <el-input v-model="bohuilist.userName" style="width: 70%;" disabled></el-input>
        </li>
        <li>
          <span>驳回理由</span>
          <el-input v-model="bohuilist.bohuiReason" style="width: 70%;" disabled></el-input>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible_bohui = false">返 回</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  inject:['reload'],
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data() {
    //这里存放数据",
    return {
      dialogVisible_bohui: false,
      bohuilist:{
        bohuiReason:"",
        checkTime:"",
        userName:"",
      },
      dialogVisible_turnDown: false,
      isDetail: 1,
      paymentMoneyNow: 0,
      faFaceValue: null,
      tableData_repairLog: [],
      tableData_detail_kaipiaoLog: [],
      tableData_paymentLog: [],
      global_checkFlowId: null,
      global_status: null,
      global_id: null,
      custom_info: {},
      dialogVisible_kaipiao_fukuang: false,
      search: {key: "", start: "", end: ""},
      dialog_PurchaseOrder: false,
      dialogVisible: false,
      tableData: [{}],
      total: 1,
      current: 1,
      pagesize: 10,
      tableData_Xu: {},
      tableData_XU_left: [],
      bohui: "",
      staus: "",

    };
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    getBOhui(checkflowId) {
      this.dialogVisible_bohui = true
      axios("/JX_java/procurement/getCheckFlowDetails?checkFlowId=" + checkflowId).then((res) => {
        console.log(res)
        let relse = res.data.data
        this.bohuilist = relse
        console.log(this.bohuilist)
      })
    },

    show_BoHui() {
      this.dialogVisible_kaipiao_fukuang = false
      this.dialogVisible_turnDown = true

    },
    confirm_kaipiao_fukuan(status) {
      let message = JSON.parse(localStorage.getItem("message"));
      let param = {
        "bohui": this.bohui,
        "checkFolwId": this.global_checkFlowId,
        "shengheMessageId": this.global_id,
        "status": status,
        "userId": message.Id,
        "userName": message.Name
      }
      console.log(param)
      axios.post("/JX_java/procurement/caigoushenghe/updatestatus", param).then(res => {
        if (res.data.data == "操作成功") {
          this.$message.success(res.data.data);
          this.reload();
          this.dialogVisible_kaipiao_fukuang = false
        } else {
          this.$message.error(res.data.data);
        }
      })
    },
    //时间格式化
    formatTime(data) {
      return data == null ? "" : data.substring(0, 10);
    },
    //时间格式
    dateFormat(format, time) {
      var t = new Date(time)
      var tf = function (i) {
        return (i < 10 ? '0' : '') + i
      }
      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
        switch (a) {
          case 'yyyy':
            return tf(t.getFullYear())
          // break
          case 'MM':
            return tf(t.getMonth() + 1)
          // break
          case 'mm':
            return tf(t.getMinutes())
          // break
          case 'dd':
            return tf(t.getDate())
          // break
          case 'HH':
            return tf(t.getHours())
          // break
          case 'ss':
            return tf(t.getSeconds())
          // break
        }
      })
    },
    //通过
    tongguo() {
      const arr = {
        "bohui": this.bohui,
        "checkFolwId": this.checkFolwId,
        "shengheMessageId": this.shengheMessageId,
        "status": 3,
        "userId": this.userId,
        "userName": this.userName,
      }
      // return
      axios
        .post(
          "/JX_java/procurement/caigoushenghe/updatestatus", arr
        )
        .then((res) => {
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.dialog_PurchaseOrder = false
            this.getList()
          } else {
            this.$message.error(res.data.data);
          }
        });
    },

    // 驳回函数
    getbo() {
      if (this.bohui == "") {
        this.$message.error("驳回理由不能为空！");
        return;
      }
      const arr = {
        "bohui": this.bohui,
        "checkFolwId": this.checkFolwId,
        "shengheMessageId": this.shengheMessageId,
        "status": 2,
        "userId": this.userId,
        "userName": this.userName,
      }
      // return
      axios
        .post(
          "/JX_java/procurement/caigoushenghe/updatestatus", arr
        )
        .then((res) => {
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.dialog_PurchaseOrder = false
            this.getList()
          } else {
            this.$message.error(res.data.data);
          }
        });
    },
    examine(id, type, statue, checkFolwId) {
      console.log(id, type, statue, checkFolwId)
      if (type == 24) {//开票
        this.isDetail = statue
        this.global_status = 2
        axios.get("/JX_java/procurement/caigoushenghe/getshengHeDetails?shengheMessageId=" + id + "&&checkFlowId=" + checkFolwId).then(res => {
          console.log(res.data.data)

          this.global_checkFlowId = res.data.data.checkFlowId
          let {partAndManpowers, invoiceTbs, kaipiaoMoney, status} = res.data.data.pojo
          this.global_id = id
          this.faFaceValue = kaipiaoMoney
          this.tableData_repairLog = partAndManpowers
          this.tableData_detail_kaipiaoLog = invoiceTbs
          this.dialogVisible_kaipiao_fukuang = true
        })
      }
      if (type == 25) {//付款
        this.global_status = 3
        this.dialogVisible_kaipiao_fukuang = true
        axios.get("/JX_java/procurement/caigoushenghe/getshengHeDetails?shengheMessageId=" + id + "&&checkFlowId=" + checkFolwId).then(res => {
          this.global_checkFlowId = res.data.data.checkFlowId
          console.log(res.data.data.pojo)
          this.isDetail = statue
          let {
            paymentMoneyNow,
            siteInvoices,
            partAndManpowers,
            siteFukuans,
            totalMoney,
            paymentMoney,
            applyPaymentMoney,
            lastPaymentMoney,
            siteName,
            contactPerson,
            phone
          } = res.data.data.pojo;
          this.global_id = id
          this.custom_info.totalMoney = totalMoney
          this.custom_info.paymentMoney = paymentMoney
          this.custom_info.applyPaymentMoney = applyPaymentMoney
          this.custom_info.lastPaymentMoney = lastPaymentMoney
          this.custom_info.siteName = siteName
          this.custom_info.contactPerson = contactPerson
          this.custom_info.phone = phone
          this.tableData_repairLog = partAndManpowers
          this.tableData_detail_kaipiaoLog = siteInvoices
          this.tableData_paymentLog = siteFukuans
          this.faFaceValue = totalMoney
          this.paymentMoneyNow = paymentMoneyNow
        })
      }
      if (type == 20) { //站点工时审核
        this.$router.push({
          path: "/ExaminManageGSSH", query: {
            id: id,
            type: type,
            statue: statue,
            checkFolwId: checkFolwId,
          }
        })
      }
      if (type == 21) { //站点产品审核
        this.$router.push({
          path: "/ExaminManageCPSH", query: {
            id: id,
            type: type,
            statue: statue,
            checkFolwId: checkFolwId,
          }
        })
      }
      if (type == 22) { //站点返件审核
        this.userId = JSON.parse(localStorage.getItem("message")).Id;
        this.userName = JSON.parse(localStorage.getItem("message")).Name;
        this.staus = statue
        this.checkFolwId = checkFolwId
        this.shengheMessageId = id
        console.log(this.staus)
        this.dialog_PurchaseOrder = true
        axios
        ("/JX_java/procurement/caigoushenghe/getshengHeDetails?shengheMessageId=" + id + "&&checkFlowId=" + checkFolwId)
          .then(res => {
            const resadd = res.data.data.pojo
            this.tableData_Xu = resadd
            this.tableData_XU_left = resadd.siteProductReturns
            console.log(resadd.siteProductReturns)

          })
      }
      if (type == 23) { //站点新增审核
        this.$router.push({
          path: "/StationServiceXQSH", query: {
            id: id,
            type: type,
            statue: statue,
            checkFolwId: checkFolwId,
          }
        })
      }
    },
    getList() {
      const json = {
        beginTime: this.search.start,
        endTime: this.search.end,
        key: this.search.key,
        pageNum: this.current,
        pageSize: this.pagesize,
      };
      axios
        .post(
          "/JX_java/afferSale/caigoushenghe/getCaigouShenghe", json
        ).then((res) => {
        const result = res.data.data.content;
        this.tableData = result
        console.log(this.tableData, 111111)
        this.total = res.data.data.totalPages
        // this.clientIdarr = result;
      });
    },
    // getXq(id) {
    //   axios("/JX_java/site/productReturn/getProductReturnDetails?shenghemessageId=" + id).then((res) => {
    //     let Add = res.data.data;
    //     this.ListArr = Add.productReturns
    //     console.log(this.tableAdd, 22222222222222222222222)
    //   });
    // },
    workflowxq(e, shows) {
      this.$router.push({path: './ExaminManageXq', query: {e: e, shows: shows}})
    },
    handleCurrentChange(e) {
      this.current = e
      this.getList();
    },
    chage(e) {
      if (e) {
        this.search.start = e[0];
        this.search.end = e[1];
      } else {
        this.search.start = "";
        this.search.end = "";
      }
    },
    onsubmit() {
      this.getList();
    },
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.siteId = JSON.parse(localStorage.getItem("listDataArr")).id
    this.userId = JSON.parse(localStorage.getItem("message")).Id;
    this.getList()
    // this.getXq(id)
  },
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {

  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {

  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {

  },
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {

  },
  //生命周期 - 销毁之前",
  beforeDestroy() {

  },
  destroyed() {

  },
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  },
}
</script>
<style lang="scss" scoped>
.bohuizujian{
  display: flex;
  flex-wrap: wrap;
  li{
    width: 33%;
    padding-top: 10px;
    text-align: center;
    span{
      display: inline-block;
      width: 25%;
    }
  }
}

.piaomian {
  width: 20%;
  margin-top: 20px;

  span {
    display: inline-block;
    margin-right: 10px;
  }

  .el-input {
    margin-right: 10px;
  }
}

.gzl {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

.table {
  margin-bottom: 20px;
}

.pgnt {
  text-align: center;
}

.demo-form-inline {
  display: inline-block;
}

.search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}

.ebtn {
  float: right;
  margin-right: 20px;
}

.el-inputbox {

  width: 100%;
  display: flex;
  flex-wrap: wrap;
  color: #909399;
  margin-top: 20px;
  margin-bottom: 10px;

  li {

    width: 33%;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: center;


    span {
      display: inline-block;
      width: 25%;
    }
  }
}

.header {
  border-bottom: 1px solid rgb(220, 222, 226);

  ul {
    width: 98%;
    display: flex;
    flex-wrap: wrap;

    li {
      width: 33%;
      //padding-top: 10px;
      padding-bottom: 20px;
      text-align: center;

      span {
        display: inline-block;
        width: 28%;
      }
    }
  }
}

.intermediate {
  border-bottom: 1px solid rgb(220, 222, 226);
  //width: 98%;
  margin: auto;
  padding-bottom: 20px;


  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    margin-top: 20px;

    li {

      width: 33%;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;

      div {
        margin-top: 5px;
      }

      span {
        display: inline-block;
        width: 25%;
      }
    }
  }
}

.footer-top {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(220, 222, 226);

  span {
    margin-right: 10px;
  }
}

.huizo {
  margin-bottom: 20px;
  color: #000;
  font-weight: 700;
}

/deep/ .is-leaf {
  text-align: center;
  background: #ffffff;
  //font-size: 16px;
}

</style>
